<template>
  <div class="w-full">
    <div>
      <div class="flex flex-wrap gap-3 pb-6 border-b border-slate-200/90">
        <div>
          <el-button
            class="bg-[#3b5999] border-[#3b5999] active:bg-[#2d4474] active:border-[#2d4474] text-white px-3.875"
          >
            <font-awesome-icon :icon="['fab', 'facebook']" class="pr-3" />
            Facebook
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#1da1f2] border-[#1da1f2] active:bg-[#33aaf3] active:border-[#33aaf3] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'twitter']" class="pr-3" />
            Twitter
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#dd4b39] border-[#dd4b39] active:bg-[#e05d4c] active:border-[#e05d4c] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'google-plus-g']" class="pr-3" />
            Google +
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#e4405f] border-[#e4405f] active:bg-[#e6536f] active:border-[#e6536f] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'instagram']" class="pr-3" />
            Instagram
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#bd081c] border-[#bd081c] active:bg-[#db0920] active:border-[#db0920] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'pinterest']" class="pr-3" />
            Pinterest
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#cd201f] border-[#cd201f] active:bg-[#de2928] active:border-[#de2928] text-white px-3.5"
          >
            <font-awesome-icon :icon="['fab', 'youtube']" class="pr-3" />
            Youtube
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#04a0f0] border-[#04a0f0] active:bg-[#13acfb] active:border-[#13acfb] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'vimeo']" class="pr-3" />
            Vimeo
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#3aaf85] border-[#3aaf85] active:bg-[#43c094] active:border-[#43c094] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'slack']" class="pr-3" />
            Slack
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#ea4c89] border-[#ea4c89] active:bg-[#ec5d94] active:border-[#ec5d94] text-white px-3.4"
          >
            <font-awesome-icon :icon="['fab', 'dribbble']" class="pr-3" />
            Dribbble
          </el-button>
        </div>
      </div>
    </div>
    <div>
      <div class="flex flex-wrap gap-3 py-8 border-b border-slate-200/90">
        <div>
          <el-button
            class="bg-[#3b5999] border-[#3b5999] active:bg-[#2d4474] active:border-[#2d4474] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'facebook']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#1da1f2] border-[#1da1f2] active:bg-[#33aaf3] active:border-[#33aaf3] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'twitter']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#dd4b39] border-[#dd4b39] active:bg-[#e05d4c] active:border-[#e05d4c] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'google-plus-g']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#e4405f] border-[#e4405f] active:bg-[#e6536f] active:border-[#e6536f] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'instagram']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#bd081c] border-[#bd081c] active:bg-[#db0920] active:border-[#db0920] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'pinterest']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#cd201f] border-[#cd201f] active:bg-[#de2928] active:border-[#de2928] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'youtube']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#04a0f0] border-[#04a0f0] active:bg-[#13acfb] active:border-[#13acfb] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'vimeo']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#3aaf85] border-[#3aaf85] active:bg-[#43c094] active:border-[#43c094] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'slack']" />
          </el-button>
        </div>
        <div>
          <el-button
            class="bg-[#ea4c89] border-[#ea4c89] active:bg-[#ec5d94] active:border-[#ec5d94] text-white w-9.85 h-9.85"
          >
            <font-awesome-icon :icon="['fab', 'dribbble']" />
          </el-button>
        </div>
      </div>
    </div>
    <div class="pt-8">
      <div class="flex flex-wrap gap-3">
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#3b5999] border-[#3b5999] active:bg-[#2d4474] active:border-[#2d4474] text-white"
          >
            <font-awesome-icon :icon="['fab', 'facebook']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#1da1f2] border-[#1da1f2] active:bg-[#33aaf3] active:border-[#33aaf3] text-white"
          >
            <font-awesome-icon :icon="['fab', 'twitter']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#dd4b39] border-[#dd4b39] active:bg-[#e05d4c] active:border-[#e05d4c] text-white"
          >
            <font-awesome-icon :icon="['fab', 'google-plus-g']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#e4405f] border-[#e4405f] active:bg-[#e6536f] active:border-[#e6536f] text-white"
          >
            <font-awesome-icon :icon="['fab', 'instagram']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#bd081c] border-[#bd081c] active:bg-[#db0920] active:border-[#db0920] text-white"
          >
            <font-awesome-icon :icon="['fab', 'pinterest']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#cd201f] border-[#cd201f] active:bg-[#de2928] active:border-[#de2928] text-white"
          >
            <font-awesome-icon :icon="['fab', 'youtube']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#04a0f0] border-[#04a0f0] active:bg-[#13acfb] active:border-[#13acfb] text-white"
          >
            <font-awesome-icon :icon="['fab', 'vimeo']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#3aaf85] border-[#3aaf85] active:bg-[#43c094] active:border-[#43c094] text-white"
          >
            <font-awesome-icon :icon="['fab', 'slack']" />
          </el-button>
        </div>
        <div>
          <el-button
            circle
            class="w-9.85 h-9.85 bg-[#ea4c89] border-[#ea4c89] active:bg-[#ec5d94] active:border-[#ec5d94] text-white"
          >
            <font-awesome-icon :icon="['fab', 'dribbble']" />
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SocialButtons',
})
</script>
